<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <script src="./jquery-1.11.1.js"></script>
    <style>
        body {
            font-family: "simsun";
        }

        .comment {
            font-size: 40px;
            color: #ff1100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>

</head>

<body>


    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

    <script>
        $(function () {
            $("ul").on("mouseenter", "li", function () {
                $(this).text("★").prevAll("li").text("★");
                $(this).nextAll("li").text("☆")
            })
            $("ul").on("mouseleave", function () {
                if ($(".current").length == 0) {
                    $("li").text("☆")
                } else {
                    $(".current").text("★").prevAll("li").text("★");
                    $(".current").nextAll("li").text("☆")
                }
            })
            $("li").on("click", function () {
                $(this).addClass("current").siblings().removeClass("current")
            })
        })
    </script>
</body>

</html>